<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 显示省 -->
    <select id="province">
    </select>
    <!-- 显示市 -->
    <select id="city">
    </select>
    <script>
        //定义数据
        let provinceArr = ['湖北省', '湖南省', '广东省']
        let cityArr = [
            ['武汉市', '孝感市', '黄石市', '十堰市', '宜昌市', '荆门市', '随州市', '恩施州'],
            ['长沙市', '株洲市', '湘潭市', '衡阳市', '邵阳市', '岳阳市', '常德市', '郴州市'],
            ['广州市', '韶关市', '深圳市', '珠海市', '汕头市', '佛山市', '江门市', '湛江市']
        ]
        let province = document.querySelector('#province')
        let city = document.querySelector('#city');
        //渲染页面
        (() => {
            provinceArr.forEach((v, index) => {
                let option = document.createElement('option')
                option.innerText = v
                option.value = index
                province.appendChild(option)
            });
            cityArr[0].forEach(v => {
                let option = document.createElement('option')
                option.innerText = v
                city.appendChild(option)
            });
        })()
        //改变父级菜单时修改子级菜单内容
        province.onchange = function () {
            city.innerHTML = '';
            cityArr[this.value].forEach(v => {
                let option = document.createElement('option')
                option.innerText = v
                city.appendChild(option)
            });
        }
    </script>
</body>

</html>